import React, { useCallback, useState } from "react";
import { NextPage } from "next";
import { Badge, Popconfirm, message, Modal, Divider, Spin } from "antd";

import { AdminLayout } from "@/layout";
import { SPTDataTable } from "@/components/SPTDataTable";
import { ViewApi } from "@/api/view";
import { ViewChart } from "@/components/ViewChart";

const Views: NextPage = () => {
  const [loading, setLoading] = useState(false);
  // 表格数据
  const [views, setViews] = useState(null);
  // 访问统计数据
  const [chartViews, setChartViews] = useState<IView[]>([]);
  // 访问统计显示
  const [visible, setVisible] = useState(false);
  // 搜索参数
  const [params, setParams] = useState(null);
  // 获取数据
  const getViews = useCallback(params => {
    setLoading(true);
    return ViewApi.getAll(params).then(res => {
      setLoading(false);
      setViews(res[0]);
      setParams(params);
      return res;
    });
  }, []);
  // 删除访问
  const deleteView = id => {
    ViewApi.deleteView(id).then(res => {
      message.success("删除成功");
      getViews(params);
    });
  };
  const columns = [
    {
      title: "IP",
      key: "ip",
      dataIndex: "ip",
      width: "10%"
    },
    {
      title: "User Agent",
      key: "userAgent",
      dataIndex: "userAgent",
      width: "30%"
    },
    {
      title: "URL",
      key: "url",
      dataIndex: "url",

      render: url => (
        <a target="_blank" href={url}>
          {url}
        </a>
      )
    },
    {
      title: "访问量",
      key: "views",
      width: 120,
      render: (_, record) => (
        <Badge
          count={record.count || 0}
          showZero={true}
          overflowCount={Infinity}
          style={{ backgroundColor: "#52c41a" }}
        />
      )
    },
    {
      title: "操作",
      key: "action",
      width: 220,
      render: (_, record) => (
        <span>
          <Popconfirm
            title="删除访问"
            okText="删除"
            cancelText="取消"
            onConfirm={() => deleteView(record.id)}
          >
            <a>删除</a>
          </Popconfirm>
          <Divider type="vertical" />
          <a
            onClick={() => {
              setVisible(true);
              setLoading(true);
              ViewApi.getViewsByUrl(record.url).then(res => {
                setChartViews(res);
                setTimeout(() => {
                  setLoading(false);
                }, 500);
              });
            }}
          >
            查看访问
          </a>
        </span>
      )
    }
  ];
  return (
    <AdminLayout>
      <SPTDataTable
        defaultTotal={0}
        columns={columns}
        data={views}
        onSearch={getViews}
        searchFields={[
          {
            label: "IP",
            field: "ip",
            msg: "请输入ip地址"
          },
          {
            label: "User Agent",
            field: "userAgent",
            msg: "输入 User Agent"
          },
          {
            label: "URL",
            field: "url",
            msg: "请输入URL"
          }
        ]}
      />
      <Modal
        title="访问统计"
        visible={visible}
        footer={false}
        closable={true}
        onCancel={() => {
          setChartViews([]);
          setVisible(false);
        }}
      >
        {loading ? (
          <Spin spinning={loading}></Spin>
        ) : (
          <ViewChart data={chartViews} />
        )}
      </Modal>
    </AdminLayout>
  );
};

export default Views;
